<!DOCTYPE html>
<html>
<head>
  	<#import "../common/common.macro.ftl" as netCommon>
	<@netCommon.commonStyle />
	<!-- DataTables -->
  	<link rel="stylesheet" href="${request.contextPath}/static/adminlte/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css">
	<!-- daterangepicker -->
	<link rel="stylesheet" href="${request.contextPath}/static/adminlte/bower_components/bootstrap-daterangepicker/daterangepicker.css">
    <title>${I18n.admin_name}-${I18n.db_info}</title>
</head>
<body class="hold-transition skin-blue sidebar-mini <#if cookieMap?exists && cookieMap["xxljob_adminlte_settings"]?exists && "off" == cookieMap["xxljob_adminlte_settings"].value >sidebar-collapse</#if>">
<div class="wrapper">
	<!-- header -->
	<@netCommon.commonHeader />
	<!-- left -->
	<@netCommon.commonLeft "dbinfo" />
	<#list belongs as belong>
		<input type="hidden" name="belongEnum" value="${belong.key}-${belong.remark}"/>
	</#list>
	<!-- Content Wrapper. Contains page content -->
	<div class="content-wrapper">
		<!-- Content Header (Page header) -->
		<section class="content-header">
			<h1>${I18n.db_info}</h1>
		</section>
		
		<!-- Main content -->
	    <section class="content">
	    
	    	<div class="row">
	    		<div class="col-xs-3">
	              	<div class="input-group">
	                	<span class="input-group-addon">${I18n.db_name}</span>
                        <input type="text" class="form-control" id="dbname" placeholder="${I18n.system_please_input}${I18n.db_name}" autocomplete="on" >
	              	</div>
	            </div>
				<div class="col-xs-3">
					<div class="input-group">
						<span class="input-group-addon">${I18n.db_belong}</span>
						<input type="text" class="form-control" id="belong" placeholder="${I18n.system_please_input}${I18n.db_belong}" autocomplete="on" >
					</div>
				</div>
				<div class="col-xs-3">
					<div class="input-group">
						<span class="input-group-addon">${I18n.db_remark}</span>
						<input type="text" class="form-control" id="remark" placeholder="${I18n.system_please_input}${I18n.db_remark}" autocomplete="on" >
					</div>
				</div>
	            <div class="col-xs-1">
	            	<button class="btn btn-block btn-info" id="searchBtn">${I18n.system_search}</button>
	            </div>
	            <div class="col-xs-2">
	            	<button class="btn btn-block btn-success add" type="button">${I18n.db_add}</button>
	            </div>
          	</div>
	    	
			<div class="row">
				<div class="col-xs-12">
					<div class="box">
			            <#--<div class="box-header hide">
			            	<h3 class="box-title">调度列表</h3>
			            </div>-->
			            <div class="box-body" >
			              	<table id="dbinfo_list" class="table table-bordered table-striped" width="100%" >
				                <thead>
					            	<tr>
					            		<th name="id" >${I18n.db_id}</th>
					                	<th name="dbName" >${I18n.db_name}</th>
										<th name="belong" >${I18n.db_belong}</th>
										<th name="dbType" >${I18n.db_type}</th>
					                  	<th name="createTime" >${I18n.db_create_time}</th>
                                        <th name="updateTime" >${I18n.db_update_time}</th>
					                  	<th>${I18n.system_opt}</th>
					                </tr>
				                </thead>
				                <tbody></tbody>
				                <tfoot></tfoot>
							</table>
						</div>
					</div>
				</div>
			</div>
	    </section>
	</div>


	<!-- footer -->
	<@netCommon.commonFooter />
</div>

<!-- job新增.模态框 -->
<div class="modal fade" id="addModal" tabindex="-1" role="dialog"  aria-hidden="true">
	<div class="modal-dialog modal-lg">
		<div class="modal-content">
			<div class="modal-header">
				<h4 class="modal-title" >${I18n.db_add}</h4>
			</div>
			<div class="modal-body">
				<form class="form-horizontal form" role="form" >
					<div class="form-group">
						<label for="dbType" class="col-sm-2 control-label">${I18n.db_field_type}<font color="red">*</font></label>
						<div class="col-sm-4">
							<select class="form-control" name="dbType" >
								<option value="1">MYSQL</option>
								<option value="2">Oracle</option>
								<option value="3">MongoDB</option>
                                <option value="4">SQLServer</option>
							</select>
						</div>
						<label for="name" class="col-sm-2 control-label">${I18n.db_field_name}<font color="red">*</font></label>
						<div class="col-sm-4"><input type="text" class="form-control" name="name" placeholder="${I18n.system_please_input}${I18n.db_field_name}" maxlength="20" ></div>
					</div>
					<div class="form-group">
						<label for="dbUserName" class="col-sm-2 control-label">${I18n.db_field_username}<font color="red">*</font></label>
						<div class="col-sm-4"><input type="text" class="form-control" name="dbUserName" placeholder="${I18n.system_please_input}${I18n.db_field_username}" maxlength="50" ></div>
						<label for="dbPassword" class="col-sm-2 control-label">${I18n.db_field_password}<font color="red">*</font></label>
						<div class="col-sm-4"><input type="password" class="form-control" name="dbPassword" placeholder="${I18n.system_please_input}${I18n.db_field_password}" maxlength="50" ></div>
					</div>
					<div class="form-group">
						<label for="dbDriver" class="col-sm-2 control-label">${I18n.db_field_driver}<font color="red">*</font></label>
						<div class="col-sm-10">
							<#--<input type="text" class="form-control" name="dbDriver" placeholder="${I18n.system_please_input}${I18n.db_field_driver}" maxlength="100" >-->
							<select class="form-control" name="dbDriver" >
								<option value="">---</option>
								<option value="com.mysql.jdbc.Driver">MYSQL5驱动</option>
								<option value="com.mysql.cj.jdbc.Driver">MYSQL8驱动</option>
								<option value="oracle.jdbc.driver.OracleDriver">Oracle驱动</option>
								<option value="com.microsoft.jdbc.sqlserver.SQLServerDriver">SQLServer驱动</option>
								<#--<option value="org.postgresql.Driver">PostgreSQL驱动</option>-->
								<#--<option value="com.ibm.db2.jdbc.net.DB2Driver">DB2驱动</option>-->
								<#--<option value="com.sybase.jdbc.SybDriver">Sybase驱动</option>-->
							</select>
						</div>
					</div>
					<div class="form-group">
						<label for="dbUrl" class="col-sm-2 control-label">${I18n.db_field_url}<font color="black">*</font></label>
						<div class="col-sm-10">
							<input type="text" class="form-control" name="dbUrl" placeholder="${I18n.system_please_input}${I18n.db_field_url}" maxlength="200" >
						</div>
					</div>
					<div class="form-group">
						<label for="dbName" class="col-sm-2 control-label">${I18n.db_field_dbName}<font color="red">*</font></label>
						<div class="col-sm-4">
							<input type="text" class="form-control" name="dbName" placeholder="${I18n.system_please_input}${I18n.db_field_dbName}" maxlength="32" >
						</div>
						<label for="remark" class="col-sm-2 control-label">${I18n.db_field_remark}<font color="black">*</font></label>
						<div class="col-sm-4"><input type="text" class="form-control" name="remark" maxlength="200" ></div>
					</div>
					<hr>
					<div class="form-group">
                        <label for="belong" class="col-sm-2 control-label">${I18n.db_field_belong}<font color="red">*</font></label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" name="belong" placeholder="${I18n.system_please_input}${I18n.db_field_belong}" maxlength="32" >
                        </div>
                        <label for="mongodbDatabase" class="col-sm-2 control-label">${I18n.db_field_mongodb_database}<font color="black">*</font></label>
                        <div class="col-sm-4"><input type="text" class="form-control" name="mongodbDatabase" placeholder="${I18n.system_please_input}${I18n.db_field_mongodb_database}" maxlength="32" ></div>
					</div>
					<div class="form-group">
                        <label for="mongodbHost" class="col-sm-2 control-label">${I18n.db_field_mongodb_host}<font color="black">*</font></label>
                        <div class="col-sm-4"><input type="text" class="form-control" name="mongodbHost" placeholder="${I18n.system_please_input}${I18n.db_field_mongodb_host}" maxlength="32" ></div>
						<label for="mongodbPort" class="col-sm-2 control-label">${I18n.db_field_mongodb_port}<font color="black">*</font></label>
						<div class="col-sm-4"><input type="text" class="form-control" name="mongodbPort" placeholder="${I18n.system_please_input}${I18n.db_field_mongodb_port}" maxlength="11" ></div>
					</div>
					<hr>
					<div class="form-group">
						<div class="col-sm-offset-3 col-sm-6">
							<button type="button" class="btn btn-primary" name="testDbInfo">${I18n.system_testDbInfo}</button>
							<button type="submit" class="btn btn-primary"  >${I18n.system_save}</button>
							<button type="button" class="btn btn-default" data-dismiss="modal">${I18n.system_cancel}</button>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>
<#-- 详情.模态框-->
<div class="modal fade" id="detailModal" tabindex="-1" role="dialog"  aria-hidden="true">
	<div class="modal-dialog modal-lg">
		<div class="modal-content">
			<div class="modal-header">
				<h4 class="modal-title" >${I18n.db_detail}</h4>
			</div>
			<div class="modal-body">
				<form class="form-horizontal form" role="form" >
					<input type="hidden" name="id" />
					<div class="form-group">
						<label for="dbType" class="col-sm-2 control-label">${I18n.db_field_type}</label>
						<div class="col-sm-4"><input type="text" class="form-control" name="dbType" readonly/></div>
						<label for="name" class="col-sm-2 control-label">${I18n.db_field_name}</label>
						<div class="col-sm-4"><input type="text" class="form-control" name="name" readonly/></div>
					</div>
					<div class="form-group">
						<label for="dbUserName" class="col-sm-2 control-label">${I18n.db_field_username}</label>
						<div class="col-sm-4"><input type="text" class="form-control" name="dbUserName" readonly/></div>
						<label for="dbPassword" class="col-sm-2 control-label">${I18n.db_field_password}</label>
						<div class="col-sm-4"><input type="password" class="form-control" name="dbPassword" readonly /></div>
					</div>
					<div class="form-group">
						<label for="dbDriver" class="col-sm-2 control-label">${I18n.db_field_driver}</label>
						<div class="col-sm-10"><input type="text" class="form-control" name="dbDriver" readonly/></div>
					</div>
					<div class="form-group">
						<label for="dbUrl" class="col-sm-2 control-label">${I18n.db_field_url}</label>
						<div class="col-sm-10"><input type="text" class="form-control" name="dbUrl" readonly/></div>
					</div>
					<div class="form-group">
						<label for="dbName" class="col-sm-2 control-label">${I18n.db_field_dbName}</label>
						<div class="col-sm-4"><input type="text" class="form-control" name="dbName" readonly/></div>
						<label for="remark" class="col-sm-2 control-label">${I18n.db_field_remark}</label>
						<div class="col-sm-4"><input type="text" class="form-control" name="remark" readonly/></div>
					</div>
					<hr>
					<div class="form-group">
                        <label for="belong" class="col-sm-2 control-label">${I18n.db_field_belong}</label>
                        <div class="col-sm-4"><input type="text" class="form-control" name="belong" readonly/></div>
                        <label for="mongodbDatabase" class="col-sm-2 control-label">${I18n.db_field_mongodb_database}</label>
                        <div class="col-sm-4"><input type="text" class="form-control" name="mongodbDatabase" readonly/></div>
					</div>
					<div class="form-group">
                        <label for="mongodbHost" class="col-sm-2 control-label">${I18n.db_field_mongodb_host}</label>
                        <div class="col-sm-4"><input type="text" class="form-control" name="mongodbHost" readonly/></div>
						<label for="mongodbPort" class="col-sm-2 control-label">${I18n.db_field_mongodb_port}</label>
						<div class="col-sm-4"><input type="text" class="form-control" name="mongodbPort" readonly/></div>
					</div>
					<hr>
					<div class="form-group">
						<div class="col-sm-offset-3 col-sm-6">
							<button type="button" class="btn btn-primary" name="testDbInfo">${I18n.system_testDbInfo}</button>
							<button type="button" class="btn btn-default" data-dismiss="modal">${I18n.system_close}</button>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>
<!-- 更新.模态框 -->
<div class="modal fade" id="updateModal" tabindex="-1" role="dialog"  aria-hidden="true">
	<div class="modal-dialog modal-lg">
		<div class="modal-content">
			<div class="modal-header">
				<h4 class="modal-title" >${I18n.db_update}</h4>
			</div>
			<div class="modal-body">
				<form class="form-horizontal form" role="form" >
					<input type="hidden" name="id" />
					<div class="form-group">
						<label for="dbType" class="col-sm-2 control-label">${I18n.db_field_type}<font color="red">*</font></label>
						<div class="col-sm-4">
							<select class="form-control" name="dbType" >
								<option value="1">MYSQL</option>
								<option value="2">Oracle</option>
								<option value="3">MongoDB</option>
								<option value="4">SQLServer</option>
							</select>
						</div>
						<label for="name" class="col-sm-2 control-label">${I18n.db_field_name}<font color="red">*</font></label>
						<div class="col-sm-4"><input type="text" class="form-control" name="name" placeholder="${I18n.system_please_input}${I18n.db_field_name}" maxlength="20" ></div>
					</div>
					<div class="form-group">
						<label for="dbUserName" class="col-sm-2 control-label">${I18n.db_field_username}<font color="red">*</font></label>
						<div class="col-sm-4"><input type="text" class="form-control" name="dbUserName" placeholder="${I18n.system_please_input}${I18n.db_field_username}" maxlength="50" ></div>
						<label for="dbPassword" class="col-sm-2 control-label">${I18n.db_field_password}<font color="red">*</font></label>
						<div class="col-sm-4"><input type="password" class="form-control" name="dbPassword" placeholder="${I18n.system_please_input}${I18n.db_field_password}" maxlength="50" ></div>
					</div>
					<div class="form-group">
						<label for="dbDriver" class="col-sm-2 control-label">${I18n.db_field_driver}<font color="red">*</font></label>
						<div class="col-sm-10">
							<#--<input type="text" class="form-control" name="dbDriver" placeholder="${I18n.system_please_input}${I18n.db_field_driver}" maxlength="100" >-->
							<select class="form-control" name="dbDriver" >
								<option value="">---</option>
								<option value="com.mysql.jdbc.Driver">MYSQL5驱动</option>
								<option value="com.mysql.cj.jdbc.Driver">MYSQL8驱动</option>
								<option value="oracle.jdbc.driver.OracleDriver">Oracle驱动</option>
								<option value="com.microsoft.jdbc.sqlserver.SQLServerDriver">SQLServer驱动</option>
								<#--<option value="org.postgresql.Driver">PostgreSQL驱动</option>-->
								<#--<option value="com.ibm.db2.jdbc.net.DB2Driver">DB2驱动</option>-->
								<#--<option value="com.sybase.jdbc.SybDriver">Sybase驱动</option>-->
							</select>
						</div>
					</div>
					<div class="form-group">
						<label for="dbUrl" class="col-sm-2 control-label">${I18n.db_field_url}<font color="red">*</font></label>
						<div class="col-sm-10">
							<input type="text" class="form-control" name="dbUrl" placeholder="${I18n.system_please_input}${I18n.db_field_url}" maxlength="200" >
						</div>
					</div>
					<div class="form-group">
						<label for="dbName" class="col-sm-2 control-label">${I18n.db_field_dbName}<font color="red">*</font></label>
						<div class="col-sm-4">
							<input type="text" class="form-control" name="dbName" placeholder="${I18n.system_please_input}${I18n.db_field_dbName}" maxlength="32" >
						</div>
						<label for="remark" class="col-sm-2 control-label">${I18n.db_field_remark}<font color="black">*</font></label>
						<div class="col-sm-4"><input type="text" class="form-control" name="remark" maxlength="200" ></div>
					</div>
					<hr>
					<div class="form-group">
                        <label for="belong" class="col-sm-2 control-label">${I18n.db_field_belong}<font color="red">*</font></label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" name="belong" placeholder="${I18n.system_please_input}${I18n.db_field_belong}" maxlength="32" >
						<#--<select class="form-control" name="belong">
                            <option value="">--</option>
                            <#list belongs as belong>
                                <option value="${belong.key}">${belong.remark}</option>
                            </#list>
                        </select>-->
                        </div>
						<label for="mongodbDatabase" class="col-sm-2 control-label">${I18n.db_field_mongodb_database}<font color="black">*</font></label>
                        <div class="col-sm-4"><input type="text" class="form-control" name="mongodbDatabase" placeholder="${I18n.system_please_input}${I18n.db_field_mongodb_database}" maxlength="32" ></div>
					</div>
					<div class="form-group">
						<label for="mongodbHost" class="col-sm-2 control-label">${I18n.db_field_mongodb_host}<font color="black">*</font></label>
						<div class="col-sm-4"><input type="text" class="form-control" name="mongodbHost" placeholder="${I18n.system_please_input}${I18n.db_field_mongodb_host}" maxlength="32" ></div>
                        <label for="mongodbPort" class="col-sm-2 control-label">${I18n.db_field_mongodb_port}<font color="black">*</font></label>
                        <div class="col-sm-4"><input type="text" class="form-control" name="mongodbPort" placeholder="${I18n.system_please_input}${I18n.db_field_mongodb_port}" maxlength="11" ></div>
					</div>
					<hr>
					<div class="form-group">
						<div class="col-sm-offset-3 col-sm-6">
							<button type="button" class="btn btn-primary" name="testDbInfo">${I18n.system_testDbInfo}</button>
							<button type="submit" class="btn btn-primary"  >${I18n.system_save}</button>
							<button type="button" class="btn btn-default" data-dismiss="modal">${I18n.system_cancel}</button>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>

<@netCommon.commonScript />
<!-- DataTables -->
<script src="${request.contextPath}/static/adminlte/bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="${request.contextPath}/static/adminlte/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
<!-- moment -->
<script src="${request.contextPath}/static/adminlte/bower_components/moment/moment.min.js"></script>
<script src="${request.contextPath}/static/adminlte/bower_components/bootstrap-daterangepicker/daterangepicker.js"></script>
<script src="${request.contextPath}/static/js/dbinfo.index.1.js"></script>

</body>
</html>
